<template>
    <div class="detail_link">
        <div class="deltail_img_link">
               <img src="https://img.dmallcdn.com/20200116/f6e9e71a-296e-4771-8185-a09f34d1fffe_800x800L" alt=""> 
        </div>
        <div class="detail_text">
            <h2>新土豆【精品】约1kg</h2>
            <span>金针菇/火龙果/食盐等1元，五得利金富强小麦粉16.9元/5kg，</span>
            <p>￥4.90</p>
        </div>
        <div class="detail_img_link_res">
            <img src="https://img.dmallcdn.com/20180808/2ff402b1-cf38-4354-957d-303d4b0c373d_m640" alt="">
            <img src="https://img.dmallcdn.com/20180808/fd48ab65-da49-4c9a-8e6d-cc2a4a268bf5_m640" alt="">
            <img src="https://img.dmallcdn.com/20180808/69426373-def6-457a-82a9-a1e83672b932_m640" alt="">
            <img src="https://img.dmallcdn.com/20180808/48d45c6b-44ab-4697-bf49-3aaae0db5b97_m640" alt="">
            <img src="https://img.dmallcdn.com/20180808/d0eab65e-bb25-4e2d-b900-616f02b9d358_m640" alt="">
            <img src="https://img.dmallcdn.com/20180808/7fb03868-7ebe-4d5f-8cbb-d1009b2c24b0_m640" alt="">
        </div>
    </div>
</template>

<script>
import Banner from '../Home/component/Banner'
    export default {
        name:'Detail',
        data() {
            return {
                detailListContent:[]
            }
        },
        components:{
            Banner
        },
        created() {
            this.getDetailFn()
        },
        methods: {
            getDetailFn() {
                this.$api.product.product({
                    params:{
                        id:this.$route.params.id
                    }
                }).then(res => {
                    console.log(res.data.data[0])
                    this.detailListContent = res.data.data[0]
                })    
            }
        },
    }
</script>

<style lang="scss" scoped>
.detail_link{
    width: 100%;
    height: auto;
    .deltail_img_link{
        width: 100%;
        height: 375px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .detail_text{
        width: 100%;
        height: 112px;
        margin-top: 20px;
        h2{
            font-size: 18px;
        }
        span{
            color: #333;
            padding: 15px 0;
            display: block;
        }
        p{
            font-size: 20px;
            color: red;
        }
    }
    .detail_img_link_res{
        width: 100%;
        img{
            width: 100%;
            display: block;
        }
    }
}
</style>